<template>
    <div class="comment-item-box">
        <div class="top-box">
            <div class="left-box">
                <el-avatar :size="30" size="small" :src="comment.icon" @error="errorHandler">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                </el-avatar>
                <div class="username">
                    <span>{{ comment.createByUser }}</span>
                    <el-tag type="danger" effect="dark" size="mini" v-if="comment.is_top == '1'">顶置</el-tag>
                    <el-tag effect="dark" size="mini" v-if="comment.is_refining == '1'">加精</el-tag>
                </div>
            </div>
            <div class="right-box" v-if="userInfo.ID">
                <el-button type="text" v-if="!comment.reply_id" @click="changeReply">
                    {{ isReply ? '取消回复' : '回复' }}
                </el-button>
                <el-button type="text" class="del" v-if="comment.createByUser == userInfo.ID"
                    @click="deleteComment(comment)">删除</el-button>
            </div>
        </div>
        <template v-if="isReply">
            <comment-reply :isReply="isReply" :replyInfo="comment" @submitSuccess="submitSuccess"></comment-reply>
        </template>
        <div class="content-box">
            <div class="content">{{ comment.content }}</div>
            <div class="addtime">{{ comment.addtime }}</div>
        </div>
    </div>
</template>
<script>
import { getCookies, showConfirm, showToast } from '../../utils/index';
import commentReply from '../comment-reply/index.vue';
import request from '../../request/request';
export default {
    props: {
        comment: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    components: {
        commentReply
    },
    data() {
        return {
            userInfo: {
                ID: ''
            },
            isReply: false
        }
    },
    mounted() {
        this.getLoginInfo();
    },
    methods: {
        async getLoginInfo() {
            let userInfo = await this.$store.dispatch('user/getUserInfo')
            if (!userInfo.isLogin) return;
            this.userInfo = userInfo.userInfo;
            this.is_show_login = false;
        },
        errorHandler() {
            return true
        },
        /**改变回复状态*/
        changeReply() {
            this.isReply = !this.isReply;
        },
        submitSuccess() {
            this.$emit('submitSuccess');
            this.changeReply();
        },
        /**
         * 删除评论
         * @param item 评论信息
         * */
        async deleteComment(item) {
            showConfirm({
                title: '删除评论',
                content: '确定删除该评论吗？',
                success: async () => {
                    request({
                        url: '/api/comment/deleteComment',
                        method: 'post',
                        data: {
                            ID: item.ID
                        },
                        success: res => {
                            if (res.code === 200) {
                                showToast({
                                    msg: "删除成功",
                                    type: "success"
                                })
                                this.$emit('deleteComment', item);
                            }
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.comment-item-box {
    padding: 10px 0;

    .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-box {
            display: flex;
            align-items: center;

            :deep .el-avatar {
                background: transparent;
            }
        }

        .username {
            margin-left: 10px;
            color: #999;
            font-size: 12px;
        }

        .right-box {
            display: flex;
            align-items: center;

            span {
                margin-left: 10px;
                color: skyblue;
                font-size: 12px;
            }

            .del {
                color: #f78989;
            }
        }
    }

    .content-box {
        margin-left: 45px;

        .content {
            padding: 5px 0;
            color: #666;
            font-size: 14px;
        }

        .addtime {
            text-align: right;
            color: #999;
            font-size: 12px;
        }
    }
}
</style>